<template>
	<el-header>
		<div class="flex-box header_top">
			<div style="display: flex; align-items: center;" :style="getWidth()">
				<div class="flexible_model">
					<i class="el-icon-s-fold flexible" v-show="$store.state.navOpen"
						@click="$store.state.navOpen = !$store.state.navOpen"></i>
					<i class="el-icon-s-unfold flexible" v-show="!$store.state.navOpen"
						@click="$store.state.navOpen = !$store.state.navOpen"></i>
				</div>

				<el-breadcrumb>
					<el-breadcrumb-item v-for="(data, index) in breadcrumbs" :key="index" :to="data.path">{{data.name}}
					</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="header_right">
				<div style="cursor: pointer;" @click="openDrawer">
					<i class="icon-tools"></i>
				</div>
				<div>
					<span style="color: #0482D1;">欢迎您，{{name.name}}</span>
				</div>
			</div>
		</div>
		<div class="header_bottom" :style="getWidth()">
			<el-tabs v-model="tabsValue" :closable="tabs.length > 1" @tab-remove="removeTab" type="card"
				@tab-click="tabClick" v-if="tabs.length">
				<el-tab-pane :label="item.label" :name="item.path" v-for="item in tabs" :key="item.path">
				</el-tab-pane>
			</el-tabs>
			<el-dropdown trigger="click" @command="closeTab" v-if="tabs.length > 1">
				<div class="tabs_operation">
					操作<i class="el-icon-arrow-down el-icon--right"></i>
				</div>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="other"><i class="el-icon-close"></i>关闭其他</el-dropdown-item>
					<el-dropdown-item command="left"><i class="el-icon-back"></i>关闭左侧</el-dropdown-item>
					<el-dropdown-item command="right"><i class="el-icon-right"></i>关闭右侧</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</el-header>
</template>

<script>
	export default {
		data() {
			return {
				name:"欢迎您，商家",
				collapse: false,
				breadcrumbs: [],
				tabs: [],
				tabsValue: '',
			};
		},

		watch: {
			collapse(value) {
				this.$pubsub.publish('collapse', value)
			}
		},

		mounted() {
			this.$pubsub.subscribe('breadcrumb', (msg, value) => {
				this.breadcrumbs = value
			})

			this.$pubsub.subscribe('addTabs', (msg, value) => {
		 		this.addTab(value)
			})
			this.getName()
		},

		methods: {
			getName() {
				this.$request.post({
					url: "merchant/merchantInfo/getName",
					success: result => {
						this.name = result
					}
				});
			},
			openDrawer() {
				this.$pubsub.publish('openDrawer')
			},

			getWidth() {
				let widthStr;
				if (this.$store.state.isPhone) {
					widthStr = 'width:100%';
				} else {
					widthStr = this.$store.state.navOpen ? 'width:calc(100vw - 200px);margin-left:200px;' :
						'width:calc(100vw - 64px);margin-left:64px;';
				}

				console.log(widthStr)
				return widthStr;
			},

			addTab(value) {
				this.$store.dispatch('common/setPageInfo', value)
				let index = this.tabs.findIndex(item => {
					return item.path == value.path
				});
				if (index != -1) {
					this.tabsValue = this.tabs[index].path
				} else {
					this.tabs.push(value)
					this.tabsValue = value.path
				}
			},

			removeTab(targetName) {
				let tabs = this.tabs;
				let activeName = this.tabsValue;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.path === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.path;
								this.$router.push(activeName)
							}
						}
					});
				}

				this.tabsValue = activeName;
				this.tabs = tabs.filter(tab => tab.path !== targetName);
			},

			// 批量关闭 tab 页操作
			closeTab(command) {
				let index = this.tabs.findIndex(item => item.path == this.tabsValue)
				switch (command) {
					case 'other':
						this.tabs = this.tabs.filter(item => item.path == this.tabsValue)
						break;
					case 'left':
						this.tabs.splice(0, index)
						break;
					case 'right':
						this.tabs.splice(index + 1)
						break;
				}
			},

			tabClick(tab) {
				this.$router.push(tab.name)
			}
		},

		beforeDestroy() {
			this.$pubsub.unsubscribe('breadcrumb', 'addTabs')
		}

	}
</script>

<style>
	.el-header {
		height: 105px !important;
		box-sizing: border-box;
		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08) !important;
		background-color: white;
		padding: 0 !important;
		z-index: 99;
	}

	.el-header .el-tabs {
		width: calc(100% - 90px);
	}

	.el-header .el-tabs__item {
		margin: 0 3px !important;
		height: 35px !important;
		line-height: 35px !important;
		border: 1px solid #E4E7ED !important;
	}

	.el-header .el-tabs--card>.el-tabs__header {
		border-bottom: 0px !important;
	}

	.el-header .el-tabs--card>.el-tabs__header .el-tabs__nav {
		border: 0px !important;
		border-radius: 0px !important;
	}

	.el-header .el-tabs__header.is-top {
		margin-bottom: 0 !important;
	}

	.el-header .el-tabs__header {
		min-height: 35px !important;
	}

	.el-header .el-tabs__nav-next,
	.el-tabs__nav-prev {
		line-height: 35px !important;
	}
</style>

<style scoped>
	.flexible {
		font-size: 28px;
		cursor: pointer;
		color: #444444;
		margin-right: 20px;
	}

	.header_right {
		display: flex;
		align-items: center;
		height: 100%;
		white-space: nowrap;
	}

	.header_right>div {
		display: flex;
		align-items: center;
		padding-left: 20px;
		height: 100%;
	}

	.header_right i {
		font-size: 26px;
	}

	.header_top {
		height: 50px;
		padding: 0 20px;
		border-bottom: 1px solid #F2F6FC;
	}

	.header_bottom {
		height: 50px;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		box-sizing: border-box;
		user-select: none;
	}

	.tabs_operation {
		font-size: 14px;
		outline: none;
		cursor: pointer;
	}
</style>
